import { Image } from 'antd';
import React, { useState, useEffect } from 'react';


import { useModel} from 'umi';
import Avatar from './AvatarDropdown';

import styles from './index.less';
export type SiderTheme = 'light' | 'dark';
import moment from 'moment'
import logo from '../../assets/img/img/logo.png';

import {alarmcode,transducerTripcode} from '@/utils/alarmcode-enum';


const GlobalHeaderRight: React.FC = () => {
  const { initialState, setInitialState } = useModel('@@initialState');
  const { dicts,alarmNotices} = initialState || {};


  const [time,setTime ] = useState();

  const  getInitNotices= async ()=>{
      //获取报警信息
     // const alarmNotices = await queryDeviceAlarmNotices({});
      if(alarmNotices!=null&&alarmNotices.length>0){
        if(initialState?.settings?.headerHeight!=116){
          await setInitialState((s) => ({ ...s, settings: {headerHeight:116} }));
        }
        // setNotices(alarmNotices);
     
      }else{
        if(initialState?.settings?.headerHeight!=84){
          await setInitialState((s) => ({ ...s, settings: {headerHeight:84} }));
        }
      }
  }

  if(alarmNotices){
    getInitNotices();
  }

const  getAlarmMsg=  (val)=>{
   // if(val.attrId!=null){
      return val.alarmValue;
    // }else {
    //   let str= alarmcode[val.alarmValue];
    //  if(!str){
    //     str= transducerTripcode[val.alarmValue];
    //  }
   
    //  return str;
    // }
}

useEffect(() => {
  setInterval(() => {
    setTime(new Date());
 }, 100);
 var obj=document.getElementById('roll_box');
 var obj1=document.getElementById('roll_content');
 var obj2=document.getElementById('roll_temp');
  if(obj2!=null){
    obj2.innerHTML=obj1.innerHTML;
    function scrolly(){
        if(obj.scrollTop>=obj1.offsetHeight){
            obj.scrollTop=0;
        }else{
            obj.scrollTop=obj.scrollTop+30;
        }
    }
    var rollTime=setInterval(scrolly,2000);
    obj.onmouseover=function(){clearInterval(rollTime);}
    obj.onmouseout=function(){rollTime=setInterval(scrolly,2000);}
  }


}, []);





  if (!initialState || !initialState.settings) {
    return null;
  }

  const { navTheme, layout } = initialState.settings;
  let className = styles.right;

  if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
    className = `${styles.right}  ${styles.dark}`;
  }





  return (

    <div>
    
      {alarmNotices&&alarmNotices!=""?
      <div className={styles.overallNotice} >

        <div id="roll_box" style={{height:'30px',overflow:'hidden' }}><div id="roll_content">
          {alarmNotices.map((val,index) => (
            <li  key={val.id}  className={ val.alarmLevel=='801'?
              [styles.item, styles.block2].join(' '): 
              val.alarmLevel=='802'?
              [styles.item, styles.block3].join(' '):
              [styles.item, styles.block4].join(' ') }>
                <a href={`/alarm/details/${val.deviceId}`+(val.ruleId==null?'':`/${val.attrId}`)} target="_blank">
                  <div className={styles.noticeflex}>
                    <span>{moment(val.alarmTime).format("YYYY-MM-DD HH:mm:ss")}</span>
                    <span>{val.areaName}</span>
                    <span>{val.deviceName}</span>
                    <span>{val.alarmName}</span>
                    <span> {val.browseName}</span>
                    <span>{getAlarmMsg(val) }</span>
                    <span>{dicts["8Enum"][val.alarmLevel]}</span>
                    <span></span>
                  </div>
                </a>
              <span></span>
            </li>
          ))
          }
        </div>
        <div id="roll_temp"></div>
      </div> 
    </div>
      :null}
      <div className={styles.hearder} >   
        <div className={styles.hearderLeft}>
          <Image src={logo} preview={false}  className={styles.hearderlog}></Image>
          <h1 className={styles.projectName}>工厂智能设备监控管理系统</h1>
        </div>
        <div className={styles.right}>  <span style={{ lineHeight: '86px'}}>{moment(time).format("YYYY-MM-DD HH:mm:ss")}</span><Avatar menu={true} /></div>
      </div>
      
      </div>
  );
};

export default GlobalHeaderRight;
